<template>
  <div name="header" class="s-header">
    <div class="login-content">
      <ul v-if="!islogin">
        <li @click="headLogin"><span>登录</span></li>
        <li @click="headRegister"><span>注册</span></li>
      </ul>
      <ul v-else>
        <li>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              欢迎您，{{ username }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="修改密码">修改密码</el-dropdown-item>
              <el-dropdown-item command="退出登录">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
    </div>
    <header>
      <div class="logo-content">
        <dsfimg :src="logoImg" :error-src="config.setting_img" />
      </div>
      <div class="data-content">
        <div class="text">
          <p>
            已开放:
            <span>{{ headData.fileOnlineNum }}</span>
            个文件,
            <span>{{ headData.dataJoinNum }}</span>
            个数据集,
            <span>{{ headData.interJoinNum }}</span>
            个API,
            <span>{{ headData.appTotalNum }}</span>
            个应用,
            <span>{{ headData.openSourceTotalNum }}</span>
            条数据项
          </p>
        </div>
        <div class="serch-content">
          <el-input v-model="serchValue" placeholder="请输入关键字查询目录名称"></el-input>
          <el-button @click="goSerch">
            高级搜索 |
            <i class="el-icon-search el-icon--right"></i>
          </el-button>
        </div>
      </div>
    </header>
    <div class="menu-content">
      <ul>
        <li :class="{ act: active == index }" v-for="(d, index) in menulist" :key="d.menuName" @click="navChange(d, index)">{{ d.menuName }}</li>
      </ul>
    </div>
    <LoginShade ref="loginShade" />
    <RegisterShade ref="registerShade" />
    <ChangeWordShade ref="changeWordShade" />
  </div>
</template>
<script>
export default {
  name: "headers",
  data() {
    return {
      logoImg: require("@/assets/imgs/pc/sindex/logo.png"),
      headData: {},
      active: 0,
      serchValue: "",
      menulist: [
        {
          menuName: "首页",
          url: "/sindex",
        },
        {
          menuName: "工作状态",
          url: "/workingCondition",
        },
        {
          menuName: "数据目录",
          url: "/DataDirectory",
        },
        {
          menuName: "APP应用",
          url: "/AppListPage",
        },
        {
          menuName: "互动交流",
          url: "/Interaction",
        },
        {
          menuName: "开放统计",
          url: "/OpenStatistics",
        },
        // {
        //   menuName: "在线地图",
        //   url: "/workingCondition",
        // },
      ],
      islogin: false,
      username: "",
    };
  },
  mounted() {
    let _this = this;
    this.getDate();

    if (su.cook.getcookie("token") && su.cook.getcookie("token") != "") {
      this.islogin = true;
      this.username = su.cook.getcookie("username");
    }
    let ind = this.menulist.findIndex(item => item.url == _this.$route.path);
    this.active = ind > -1 ? ind : -1; //反显让菜单选中
  },
	
  methods: {
    getDate() {
      this.$http
        .get("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/getTotalNum")
        .then(res => {
          if (res.code == 0) {
            this.headData = res.data[0];
          }
        })
        .catch(err => {
          console.log(err.message || "数据异常");
        });
    },
    navChange(d, index) {
      this.serchValue = "";
      if (d.url == "/sindex") {
        this.active = index;
        this.$router.push(d.url);
        return;
      }
      this.$tologin().then(r => {
        if (d.url) this.$router.push(d.url);
        this.active = index;
      });
    },
    headLogin() {
      this.$refs.loginShade.dialogLogin = true;
    },
    headRegister() {
      this.$refs.registerShade.dialogRegister = true;
    },
    handleCommand(command) {
      if (command == "修改密码") {
        this.$refs.changeWordShade.dialogChangeWord = true;
      } else if (command == "退出登录") {
        su.cook.clearCookie();
        location.href = "./";
      }
    },
    goSerch() {
      if (this.serchValue != "") {
        this.active = -1;
        this.$router.push(`/serch?name=${this.serchValue}`);
      } else {
        this.$message({
          message: "请输入内容",
          type: false,
        });
      }
    },
  },
};
</script>
